import React, { useEffect } from 'react';
import { Link } from 'react-router-dom';

import { useAppDispatch, useStoreDispatch } from '@store/hooks';
import { loginApi } from '@store/reducers/appSlice';

import { Form, Input, Button, Checkbox } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';

import {
    login,
    loginForm,
    loginFormButton,
    loginFormForgot,
    loginFormNoMarginBottom,
    loginFormTitle,
    loginTitle,
} from './index.less';

const Login = () => {
    let { t } = useTranslation();
    const dispatch = useStoreDispatch();
    // const appDispatch = useAppDispatch();

    const onFinish = (values: any) => {
        console.log('Received values of form: ', values);
        dispatch(loginApi(values));
        // appDispatch(loginApi(values));
    };
    let title = 'system login page';
    let spans = title.split('').map((text, i) => {
        return (
            <span key={i} style={{ animationDelay: `${-20 + i * 0.1}s` }}>
                {text}
            </span>
        );
    });
    return (
        <div className={login}>
            <Form name="normal_login" className={loginForm} initialValues={{ remember: true }} onFinish={onFinish}>
                <div className={loginFormTitle}>
                    <div className={loginTitle}>{spans}</div>
                </div>
                <Form.Item name="username" rules={[{ required: true, message: t('UsernameMsg') + '!' }]}>
                    <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder={t('Username')} />
                </Form.Item>
                <Form.Item name="password" rules={[{ required: true, message: t('PasswordMsg') + '!' }]}>
                    <Input.Password
                        prefix={<LockOutlined className="site-form-item-icon" />}
                        placeholder={t('Password')}
                    />
                </Form.Item>
                <Form.Item className={loginFormNoMarginBottom}>
                    <Form.Item name="remember" valuePropName="checked" noStyle>
                        <Checkbox>{t('rememberMe')}</Checkbox>
                    </Form.Item>
                </Form.Item>
                <Form.Item className={loginFormNoMarginBottom}>
                    <Button type="primary" htmlType="submit" className={loginFormButton}>
                        {t('login')}
                    </Button>
                </Form.Item>
                <Form.Item className={loginFormNoMarginBottom}>
                    <a href="#/home">{t('registerNow')}!</a>
                    <a className={loginFormForgot} href="#/blog">
                        {t('ForgotPassword')}!
                    </a>
                </Form.Item>
            </Form>
        </div>
    );
};

export default Login;
